<template>
  <input 
    type="text"
    :value="currentValue"
    @input="handleInput"
    @blur="handleBlur"
  />
</template>

<script>
import Emitter from "common/commonJS/emitter";
export default {
  name: "yInput",
  mixins: [Emitter],
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      currentValue: this.value,
    };
  },
  watch: {
    value (val) {
      this.currentValue = val;
    }
  },
  methods: {
    handleInput (event) {
      const _value = event.target.value;
      this.currentValue = _value;
      this.$emit('input', _value);
      this.dispatch('yFormItem', 'on-form-change', _value);
    },
    handleBlur() {
      this.dispatch('yFormItem', 'on-form-blur', this.currentValue);
    }
  }
};
</script>

<style>

input {
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid #999;
  border-radius: 4px;
  /* box-shadow: 0 2px 8px 0 rgba(77,79,168,.12); */
}
</style>